<template>
  <form-data
    ref="formData"
    :formItems="formItems"
    :initData="initData"
    :itemLabelWidth="110"
    :configs="{ showHoverMsg: false }"
  >
  </form-data>
</template>
<script>
export default {
  props: {
    appInfo: {
      type: Object,
      default: {}
    },
    dataInfo: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      initData: {
        appCode: this.appInfo.appCode,
        count: 0,
        grade: 0,
        id: '',
        limitApp: 'default',
        minRequestAmount: 0,
        resource: this.appInfo.resource,
        resourceType: this.appInfo.resourceType,
        routeId: this.appInfo.routeId,
        slowRatioThreshold: 0,
        statIntervalMs: 0,
        tenantCode: this.appInfo.tenantCode,
        timeWindow: 0
      },
      formItems: [
        {
          type: 'string',
          required: true,
          title: this.$t('module.apiManage.APIResource'),
          key: 'resource',
          maxlength: 256,
          disabled: true,
          colSpan: 24
        },
        {
          type: 'radio',
          title: this.$t('module.apiManage.fusingStrategy'),
          key: 'grade',
          radios: [
            { label: this.$t('module.apiManage.SlowCallRatio'), value: 0 },
            { label: this.$t('module.apiManage.AbnormalProportion'), value: 1 },
            { label: this.$t('module.apiManage.Abnormal'), value: 2 }
          ],
          onChange: form => {
            form.count = 0
            form.slowRatioThreshold = 0
          },
          colSpan: 24
        },
        {
          type: 'InputNumberWithUnit',
          required: true,
          number: true,
          title: this.$t('module.apiManage.maxRT'),
          key: 'count',
          show: form => {
            return form.grade === 0
          },
          props: {
            min: 0,
            max: 2147483647,
            placeholder: this.$t('module.apiManage.placeholder.pleaseEnter'),
            append: this.$t('module.apiManage.unitMs')
          }
        },
        {
          type: 'number',
          required: true,
          number: true,
          title: this.$t('module.apiManage.slowRatioThresholdRatio'),
          key: 'slowRatioThreshold',
          max: 1,
          min: 0,
          step: 0.1,
          // formatter: value => {
          //   return value
          // },
          // parser: value => {
          //   return value
          // },
          show: form => {
            return form.grade !== 2
          }
        },
        {
          type: 'number',
          required: true,
          number: true,
          title: this.$t('module.apiManage.Abnormal'),
          key: 'count',
          min: 0,
          max: 2147483647,
          show: form => {
            return form.grade === 2
          },
          colSpan: 24
        },
        {
          type: 'InputNumberWithUnit',
          required: true,
          number: true,
          title: this.$t('module.apiManage.timeWindowSecond'),
          key: 'timeWindow',
          props: {
            min: 0,
            max: 2147483647,
            placeholder: this.$t('module.apiManage.placeholder.pleaseEnter'),
            append: this.$t('module.apiManage.unitSec')
          }
        },
        {
          type: 'number',
          required: true,
          number: true,
          title: this.$t('module.apiManage.minRequestAmount'),
          min: 0,
          max: 2147483647,
          key: 'minRequestAmount'
        },
        {
          type: 'InputNumberWithUnit',
          required: true,
          number: true,
          title: this.$t('module.apiManage.statIntervalMs'),
          key: 'statIntervalMs',
          props: {
            min: 0,
            max: 2147483647,
            placeholder: this.$t('module.apiManage.placeholder.pleaseEnter'),
            append: this.$t('module.apiManage.unitMs')
          }
        }
      ],
      actions: [
        {
          text: this.$t('common.confirm'),
          theme: 'primary',
          handle: () => {
            this.save()
          },
          loading: false
        },
        {
          text: this.$t('common.cancel'),
          handle: () => {
            this.$emit('Close')
          }
        }
      ]
    }
  },
  created() {
    if (this.dataInfo) {
      this.initData = this.dataInfo
      this.$emit('SetTitle', this.$t('module.apiManage.editFusing'))
    } else {
      this.$emit('SetTitle', this.$t('module.apiManage.createFusing'))
    }
    this.$emit('SetPageWidth', 700)
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    save() {
      this.$refs.formData.validateDataPromise().then(res => {
        const action = !!this.dataInfo ? 'updateFusingRule' : 'addFusingRule'
        window.$http.post(`${window.RPConfig.mgt}/api/` + action, res).then(res => {
          this.$message.success({
            content: this.$t(`common.${!this.dataInfo ? 'addSuccess' : 'updateSuccess'}`),
            duration: 3
          })
          this.$emit('Close', true)
        })
      })
    }
  }
}
</script>
<style scoped></style>
